<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!-- 样式表 -->
        <style>
            p {
                /* 字体颜色 */
                color: red;

                width: 200px;

                border: 2px solid yellow;
            }

            img {
                width: 200px;
            }

            .a {
                width: 300px;
            }

            #test {
                background: gray;
            }


        </style>
    </head>
    <body>
        <!-- 段落标签 -->
        <!-- 
            strong和em都有强调文本重要性的作用.
            strong: 加粗
            em: 字体倾斜
         -->
        <p id="test">
            今天<strong>天气</strong>不错. 今天天气不错.今天天气不错.今天天气不错.今天天气不错.今天天气不错.今天天气不错. <em>今天</em>天气不错.今天天气不错.今天天气不错.今天天气不错.今天天气不错.今天天气不错.
        </p>
        <!-- 
            src: 资源路径
         -->
        <!-- 
            网络路径
         -->
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1429216642,2416737722&fm=26&gp=0.jpg" alt="">
        <!-- 
            本地路径
         -->
        <!-- 
            相对路径
            ./ 代表当前目录 ./可以省略
            ../ 跳到上级目录
            title：鼠标移动到元素上方时的提示信息
            alt: 图片加载失败时的替换文本
         -->
        <img src="../a/b/ab.jpg" alt="图片加载失败" title="美女图">
        <!-- 
            绝对路径
         -->
        <img class="a" src="/Users/qingyun/Desktop/HTML/a/b/a.jpg" alt="">
        
        <!-- 无序列表 -->
        <ul>
            <li>三国演义</li>
            <li>红楼梦</li>
            <li>金瓶梅</li>
        </ul>

        <!-- 有序列表 -->
        <ol>
            <li>武松打虎</li>
            <li>武松打潘金莲</li>
            <li>大朗喝药</li>
        </ol>

        <ul>
            <li>
                水浒传
                <ol>
                    <li>武松打虎</li>
                    <li>武松打潘金莲</li>
                    <li>大朗喝药</li>
                </ol>

            </li>
            <li>
                三国演义
                <ol>
                    <li>七擒孟获</li>
                    <li>空城计</li>
                    <li>官渡之战</li>
                </ol>

            </li>
        </ul>

        <!-- h1~h6 -->
        <!-- 
            标题标签: 在文章中的重要性一次递减
         -->
        <h1>习大大</h1> 
        <h2>习大大去兰考找歪哥</h2>  
        <h3>歪哥不在家</h3>
        <h4>歪哥在郑州</h4>
        <h5>歪哥在讲课</h5>
        <h6>讲的前端</h6>

        <!-- 超链接标签 -->
        <!-- 
            href: 超链接属性，网页之间的纽带
            target="_blank": 在空白页打开网站
            target="_self": 在当前页打开
         -->
        <a href="http://www.baidu.com" target="_self">百度一下</a>

        <a href="#test">跳到p标签</a>
        <a href="image.zip">下载图片</a>
        <a href="index.html">index</a>
    </body>
</html>